<template>
    <el-dialog :title="title" :visible.sync="visible" width="560px" append-to-body :close-on-click-modal="false">
        <BaseForm2
            ref="form"
            v-loading="loading"
            label-position="right"
            label-width="114px"
            :fields="fields"
            :text-model="textModel"
            :data="form"
            size="medium"
        >
            <template #uploadfile>
                <UploadFile ref="uploadFile" :value.sync="appendix" />
            </template>
        </BaseForm2>
        <div slot="footer" class="dialog-footer">
            <BaseButton :loading="submitLoading" @click="submitForm">保 存</BaseButton>
            <BaseButton type="recond" @click="cancel">取 消</BaseButton>
        </div>
    </el-dialog>
</template>

<script>
import UploadFile from './UploadFile'
import BaseForm2 from '@/components/BaseForm2'
import { DecisionReportModel } from '@/models'
export default {
    name: 'AddOrUpdate',
    components: {
        BaseForm2,
        UploadFile
    },
    data() {
        return {
            model: new DecisionReportModel(),
            title: '新增决策项目',
            visible: false,
            submitLoading: false,
            loading: false,
            // 表单参数
            form: {},
            appendix: [],
            type: 'add',
            id: '',
            textModel: false,
            fields: [
                {
                    label: '',
                    children: [
                        {
                            key: 'fileName',
                            type: 'input',
                            label: '文件名称',
                            span: 24,
                            maxlength: '30',
                            'show-word-limit': true,
                            rules: [
                                { required: true, message: '必填项', trigger: ['blur'] }
                            ]
                        },
                        {
                            key: 'orgName',
                            type: 'input',
                            label: '所属单位',
                            span: 24,
                            maxlength: '50',
                            'show-word-limit': true,
                            rules: [
                                { required: true, message: '必填项', trigger: ['blur'] }
                            ]
                        },
                        {
                            key: 'reportYear',
                            type: 'date-input',
                            format: 'yyyy',
                            'value-format': 'yyyy',
                            defaultType: 'year',
                            span: 24,
                            label: '报告年份',
                            rules: [
                                { required: true, message: '必填项', trigger: ['change'] }
                            ]
                        },
                        {
                            type: 'slot',
                            name: 'uploadfile',
                            htmlLabel: `<span style="color: #E50834;margin-right: 4px;">*</span>文件`,
                            span: 24
                        }
                    ]
                }
            ]
        }
    },
    created() {
    },
    methods: {
        // 取消按钮
        cancel() {
            this.visible = false
            this.reset()
        },
        async open(options = {}) {
            const { type, id = null } = options
            this.id = id
            this.visible = true
            this.reset()
            if (type === 'add') {
                this.title = '上传决策报告'
            } else {
                this.title = '修改决策报告'
                const form = await this.getDetail()
                this.form = form
                this.appendix = [{
                    name: form.uploadFileName,
                    url: form.fileUrl
                }]
            }
        },
        getDetail() {
            this.loading = true
            return this.model.detail({ id: this.id }).finally(() => {
                this.loading = false
            })
        },
        // 表单重置
        reset() {
            this.appendix = []
            this.$nextTick(() => {
                this.$refs['form'].resetFields()
                this.$refs.uploadFile.fileList = []
                this.$refs.uploadFile.files = []
                this.$refs.uploadFile.uploadBtnShow(this.$refs.uploadFile.files)
            })
        },
        submitForm() {
            if (!this.appendix.length) {
                this.$message.error('请上传文件！')
                return false
            }
            this.$refs['form'].validate((valid, res) => {
                if (valid) {
                    console.log(res, this.appendix)
                    this.submitLoading = true
                    const data = {
                        ...res,
                        fileUrl: this.appendix[0].url,
                        uploadFileName: this.appendix[0].name

                    }
                    this.id && (data.id = this.id)
                    this.model
                        .saveOrUpdate(data)
                        .then(() => {
                            this.$message({
                                type: 'success',
                                message: '操作成功！',
                                duration: 500,
                                onClose: () => {
                                    this.visible = false
                                    this.$emit('success')
                                }
                            })
                        })
                        .finally(() => {
                            setTimeout(() => {
                                this.submitLoading = false
                            }, 1000)
                        })
                } else {
                    this.$message.error('校验失败！')
                }
            })
        }
    }
}
</script>

<style lang="scss" scoped>
.w-300 {
    width: 300px;
}
</style>
